<template>
  <div class="app-container">
    <!-- Header 头部区域 -->
    <Header title="购物车案例"></Header>
    <!-- 商品信息 -->
    <Goods
      v-for="item in list"
      :key="item.id"
      :title="item.goods_name"
      :pic="item.goods_img"
      :price="item.goods_price"
      :state="item.goods_state"
      :count="item.goods_count"
      :id="item.id"
      @state-change="getNewState"
    >
    </Goods>
    <!-- 结算 -->
    <Footer
      :isfull="fullState"
      @full-change="getFullState"
      :amount="amt"
      :all="total"
    ></Footer>
  </div>
</template>

<script>
// 导入 axios 请求库
import axios from "axios";
// 导入需要的组件
import Header from "@/components/Header/Header.vue";
import Goods from "@/components/Goods/Goods.vue";
import Footer from "@/components/Footer/Footer.vue";
import bus from "@/components/eventBus.js";
export default {
  data() {
    return {
      //list: []
      list: [
        {
          id: 1,
          goods_name:
            "班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣",
          goods_img: "https://www.escook.cn/vuebase/pics/1.png",
          goods_price: 108,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 2,
          goods_name:
            "嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮",
          goods_img: "https://www.escook.cn/vuebase/pics/2.png",
          goods_price: 129,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 3,
          goods_name:
            "思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套",
          goods_img: "https://www.escook.cn/vuebase/pics/3.png",
          goods_price: 198,
          goods_count: 1,
          goods_state: false,
        },
        {
          id: 4,
          goods_name:
            "思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套",
          goods_img: "https://www.escook.cn/vuebase/pics/4.png",
          goods_price: 99,
          goods_count: 1,
          goods_state: false,
        },
        {
          id: 5,
          goods_name:
            "幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮",
          goods_img: "https://www.escook.cn/vuebase/pics/5.png",
          goods_price: 156,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 6,
          goods_name: "ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女",
          goods_img: "https://www.escook.cn/vuebase/pics/6.png",
          goods_price: 142.8,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 7,
          goods_name:
            "幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套",
          goods_img: "https://www.escook.cn/vuebase/pics/7.png",
          goods_price: 219,
          goods_count: 2,
          goods_state: true,
        },
        {
          id: 8,
          goods_name:
            "依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套",
          goods_img: "https://www.escook.cn/vuebase/pics/8.png",
          goods_price: 178,
          goods_count: 1,
          goods_state: true,
        },
        {
          id: 9,
          goods_name:
            "芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬",
          goods_img: "https://www.escook.cn/vuebase/pics/9.png",
          goods_price: 128,
          goods_count: 1,
          goods_state: false,
        },
        {
          id: 10,
          goods_name:
            "Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫",
          goods_img: "https://www.escook.cn/vuebase/pics/10.png",
          goods_price: 153,
          goods_count: 1,
          goods_state: false,
        },
      ],
    };
  },
  components: {
    Header,
    Goods,
    Footer,
  },
  computed: {
    // 动态计算出全选的状态是 true 还是 false
    fullState() {
      return this.list.every((item) => item.goods_state);
    },
    amt() {
      return this.list
        .filter((item) => item.goods_state)
        .reduce(
          (total, item) => (total += item.goods_price * item.goods_count),
          0
        );
    },
    // 已勾选商品的总数量
    total() {
      return this.list
        .filter((item) => item.goods_state)
        .reduce((t, item) => (t += item.goods_count), 0);
    },
  },
  created() {
    bus.$on("share", (val) => {
      this.list.some((item) => {
        if (item.id === val.id) {
          item.goods_count = val.value;
          return true;
        }
      });
    });
  },
  methods: {
    // 获取每个商品列表项的的
    getNewState(e) {
      this.list.some((item) => {
        if (item.id === e.id) {
          item.goods_state = e.value;
          return true;
        }
      });
    },
    // 实现全选和反选
    getFullState(e) {
      this.list.forEach((item) => {
        item.goods_state = e;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
